<template>
    <a-modal v-model:open="showModal" :width="500" :title="formTitle" @ok="confirm">
        <div class="pt-[20px]" aria-hidden="true">
            <a-form :model="formData" ref="formRef" :label-col="{ style: { width: '120px' } }">
                <a-form-item label="版本号" name="type">
                    <a-radio-group v-model:value="formData.type" name="type">
                        <a-radio value="android">安卓</a-radio>
                        <a-radio value="ios">苹果</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="应用版本号" name="version" :rules="[{ required: true, message: '请输入应用版本号' }]" help="内部更新版本号，例如：100">
                    <a-input v-model:value="formData.version" />
                </a-form-item>
                <a-form-item label="外部版本号" name="version_code" :rules="[{ required: true, message: '请输入外部版本号' }]" help="外部显示版本号,例如：1.0.0">
                    <a-input v-model:value="formData.version_code" />
                </a-form-item>
                <a-form-item label="上传应用" name="url" :rules="[{ required: true, message: '请输入上传应用' }]">
                    <upload-file v-model="formData.url" />
                </a-form-item>
                <a-form-item label="更新内容" name="desc" :rules="[{ required: true, message: '请输入更新内容' }]">
                    <a-textarea v-model:value="formData.desc" placeholder="请输入更新内容" :rows="4" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { addVersion, editVersion } from '@/utils/api/version';
import UploadFile from '@/components/upload-file/index.vue';

const showModal = ref<boolean>(false);

/**
 * 表单数据
 */
const initialFormData = {
    id: 0,
    type: 'android',
    version: '',
    version_code: '',
    desc: '',
    url: '',
}

const formData: Record<string, any> = reactive({ ...initialFormData })

const formRef = ref();

const formTitle = ref('添加');

const setFormData = async (row: any = null) => {
    if (row == null) {
        formTitle.value = '添加';
        Object.assign(formData, initialFormData);
    } else {
        formTitle.value = '编辑';
        Object.assign(formData, row);
    }
}

const emit = defineEmits(['complete']);

const confirm = (e: MouseEvent) => {
    formRef.value
        .validate()
        .then(() => {
            console.log(formData);
            if (formData.id > 0) {
                editVersion(formData).then((res: any) => {
                    message.success(res.message)
                })
            } else {
                addVersion(formData).then((res: any) => {
                    message.success(res.message)
                })
            }
            showModal.value = false;
            setTimeout(function () {
                emit('complete');
            }, 1000);
        });
};



defineExpose({
    showModal,
    setFormData
})
</script>